<template>
  <div class="huize_advisory">
    <div class="advisory centre">
      <div class="nav_advisory">
        <div class="nav_left">
          <div class="left_top">
<<<<<<< HEAD
            <img :src="HttpURL.URLimg01" alt />
=======
            <img src="@/assets/img/shu2.jpg" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
            <div class="router">
              <div>常识百科</div>
            </div>
          </div>
          <div class="left_bottom">
<<<<<<< HEAD
            <img :src="HttpURL.URLimg02" alt />
=======
            <img src="@/assets/img/qianbi2.jpg" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
            <div class="router">
              <div>政策解读</div>
            </div>
          </div>
        </div>
        <div class="nav_among">
          <div class="among_top">
<<<<<<< HEAD
            <img :src="HttpURL.URLimg03" alt />
=======
            <img src="@/assets/img/qianbi1.jpg" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
            <div class="router">
              <div>1、报名</div>
            </div>
          </div>
          <div class="among_bottom">
<<<<<<< HEAD
           <img :src="HttpURL.URLimg04" alt />
=======
            <img src="@/assets/img/jianto.jpg" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
            <div class="router">
              <div>3、体验面试</div>
            </div>
          </div>
        </div>
        <div class="nav_right">
          <div class="riht_top">
<<<<<<< HEAD
            <img :src="HttpURL.URLimg05" alt />
=======
            <img src="@/assets/img/shu2.jpg" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
            <div class="router">
              <div>2、政治品德审查</div>
            </div>
          </div>
          <div class="right_bottom">
            <div class="left">
<<<<<<< HEAD
             <img :src="HttpURL.URLimg06" alt />
=======
              <img src="@/assets/img/qianbi1.jpg" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
              <div class="router">
                <div>4、考试</div>
              </div>
            </div>
            <div class="right">
<<<<<<< HEAD
             <img :src="HttpURL.URLimg07" alt />
=======
              <img src="@/assets/img/px.jpg" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
              <div class="router">
                <div>5、志愿填报</div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
         <Information/>
   
    </div>
   
    
  </div>
</template>
<script>
import Information from "./Information"
export default {
  name: "Advisory",
  components:{
Information
<<<<<<< HEAD
  },
   data() {
    var HttpURL = "https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/";
    return {
      HttpURL: {
        URLimg01: HttpURL + "1576220806057shu2.jpg",
        URLimg02: HttpURL + "1576220575652qianbi2.jpg",
        URLimg03: HttpURL + "1576220839696qianbi1.jpg",
        URLimg04: HttpURL + "1576220869082jianto.jpg",
        URLimg05: HttpURL + "1576220806057shu2.jpg",
        URLimg06: HttpURL + "1576220839696qianbi1.jpg",
        URLimg07: HttpURL + "1576220911704px.jpg"
      }
    };
  },
=======
  }
  
>>>>>>> 314b442cce11d658746227581b0160373004c345
};
</script>
<style lang="scss">
.huize_advisory {
  position: relative;
  z-index: 20;
  
  padding: 44px 0;
  background: #f8f8f8;
  .nav_advisory {
    width: 100%;
    height: 400px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    margin-bottom:108px; 
    img {
      width: 100%;
      height: 100%;
    }

    .nav_left {
      width: 400px;
      height: 100%;

      .left_top {
        height: 50%;
        position: relative;
      }
      .left_bottom {
        height: 50%;
        position: relative;
      }
    }
    .nav_among {
      width: 260px;

      height: 100%;
      .among_top {
        position: relative;
        height: 260px;
      }
      .among_bottom {
        position: relative;
        height: 140px;
        .router {
          div {
           
            margin: 0 auto;
            width: 110px;
            text-align: center;
            line-height: 40px;
            margin-top: 20px;

            border-bottom: 1px solid #ffffff;
          }
        }
      }
    }
    .nav_right {
      width: 552px;

      height: 100%;
      .riht_top {
        position: relative;
        height: 194px;
        .router {
          div {
            margin: 0 auto;
            width: 148px;
            text-align: center;
            line-height: 40px;
            margin-top: 80px;

            border-bottom: 1px solid #ffffff;
          }
        }
      }
      .right_bottom {
        height: 216px;
        display: flex;
        width: 100%;
        .left {
          position: relative;
          width: 220px;
          height: 100%;

          .router {
            div {
              margin: 0 auto;
              width: 80px;
              text-align: center;
              line-height: 40px;
              margin-top: 88px;

              border-bottom: 1px solid #ffffff;
            }
          }
        }
        .right {
          position: relative;
          width: 330px;
            .router {
            div {
              margin: 0 auto;
              width: 110px;
              text-align: center;
              line-height: 40px;
              margin-top: 88px;

              border-bottom: 1px solid #ffffff;
            }
          }
        }
      }
    }
    .router {
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: 100;
      background: rgba($color: #000000, $alpha: 0.4);
      color: #fff;
      div {
           cursor:pointer;
        margin: 0 auto;
        width: 80px;
        text-align: center;
        line-height: 40px;
        margin-top: 80px;

        border-bottom: 1px solid #ffffff;
      }
    }
  }
}
</style>